axios.defaults.baseURL = 'http://ajax-api.itheima.net'

const title = document.querySelector('.top')

// 封装一个渲染函数
const render = async () => {
  const { data: res } =await axios({
    url: '/api/category/top',
    method: 'GET',
  })

  const arr = res.data.map((item) => {
    return axios({
      url: '/api/category/sub?id=' + item.id,
      method: 'GET',
    })
  })

  const newArr = await Promise.all(arr)

  const html = newArr.map(({ data: res }) => {
    return `
       <li>
   <a href="javascript:;">${res.data.name}</a>
   <ul class="sub">
    ${res.data.children
      .map((item) => {
        return `
     <li>
       <a href="javascript:;">
         <span>${item.name}</span>
         <img src="${item.picture}" alt="">
       </a>
     </li>`
      })
      .join('')}
   </ul>
   </li>
       `
  }).join('')


  title.innerHTML = html
}
render()
